<template>
  <div>
    <div class="items">

      <!-- 使用 v-for 渲染单选按钮 -->
      <div class="contentItem" v-for="(item, index) in productList" :key="index">
        <label>
          <input type="radio" id="selectProduct" :value="item" v-model="selectedProduct">
          <div>
            <p> {{ item.name }}</p>
            <p> {{ item.CurrencyNumber }}</p>
            <p> {{ item.AddressesNumber }}</p>
            <p> {{ item.Term }}</p>
          </div>
        </label>
      </div>

    </div>

    <!-- 显示当前选中的选项 -->
    <p>当前选中的选项是：{{ selectedProduct.name }}</p>
    <p>当前选中的选项是：{{ selectedProduct.CurrencyNumber }}</p>
    <p>当前选中的选项是：{{ selectedProduct.AddressesNumber }}</p>
    <p>当前选中的选项是：{{ selectedProduct.Term }}</p>


  </div>
</template>

<script setup>
import { ref } from 'vue'

const productList = ref([
  {
    name: '套餐A',
    CurrencyNumber: '无限',
    AddressesNumber: '无限',
    Term: '1',
  },
  {
    name: '套餐B',
    CurrencyNumber: '无限',
    AddressesNumber: '无限',
    Term: '3',
  },
  {
    name: '套餐C',
    CurrencyNumber: '无限',
    AddressesNumber: '无限',
    Term: '6',
  },
  {
    name: '套餐D',
    CurrencyNumber: '无限',
    AddressesNumber: '无限',
    Term: '12',
  },
]);
const selectedProduct = ref({});

console.log(selectedProduct);

</script>

<style scoped>
input {
  -webkit-appearance: none;
}

.items {
  width: 6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;

  .contentItem {
    width: 2rem;
    background: green;
  }

}
</style>